<template>
  <div>
    <div ref="wrapper" class="wrapper">
      <div ref="list" class="list" >
        <a ref="mya" v-for="(item,index) in Categorylist" :class="[selecIndex === index?'active':'']" :key="item.id" @click='color(index),selecCate(item.id)' >
          {{item.title}}
        </a>
      </div>
    </div>

    <div class="imglist">
      <ul>
        <routerLink tag="li" :to="`/home/imgInfo/${item.id}`" v-for="(item, index) in ImgList" :key="index">
          <img v-lazy="item.img_url"></img>
          <div class='info'>
            <div class="title">{{item.title}}</div>
            <div class="text">{{item.zhaiyao}}</div>
          </div>
        </routerLink >
      </ul>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import {api} from '@/common/api.js'
// http://www.liulongbin.top:3005/api/getimgcategory/
export default {
  data () {
    return {
      Categorylist: [],
      ImgList: [],
      selecIndex: 0
    }
  },
  created () {
    this.getCategory()
    this.getImgList(0)
  },
  mounted () {
    this.$nextTick(() => {
      this._initPics()
    })
  },
  watch: {
    // 监听currentKillList变量的值的变化在初始化
    // 防止滚动不生效
    Categorylist () {
      this.$nextTick(() => {
        this._initPics()
      })
    }
  },
  methods: {
    // 用于初始化“商家实景”的横向滚动效果
    _initPics () {
    // 先判断是否有这个属性
      // 这里之所以要设置宽度，是因为.wrapper和.list的宽度一样大
      // 当.list的宽度大于.wrapper的宽度，才能横向滚动
      let itemWidth = 60 // 这里是设置列表每一项的宽度
      // 根据获取的list长度+1
      let margin = 60
      // width是整个列表的宽度

      // console.log(this.Categorylist.length)根据获取list 的长度计算
      let width = (itemWidth + margin) * (this.Categorylist.length + 1) - margin

      this.$refs.list.style.width = width + 'px' // 设置.list的宽度的宽度
      this.$nextTick(() => {
        if (!this.picScroll) {
          this.picScroll = new BScroll(this.$refs.wrapper, {
            scrollX: true,
            eventPassthrough: 'vertical' // 忽略竖直方向的滚动
          })
        } else {
          this.picScroll.refresh()
        }
      })
    },
    getCategory () {
      this.$axios.get(`${api}getimgcategory`).then(res => {
        res.data.message.unshift({title: '全部', id: 0})
        this.Categorylist = res.data.message
      })
    },
    // #007aff
    color (i) {
      this.selecIndex = i
    },
    getImgList (id) {
      this.$axios.get(`${api}getimages/${id}`).then(res => {
        this.ImgList = res.data.message
        // 这个借口有点问题，我看下如果调不到都全部战士
        if (this.ImgList.length === 0) {
          this.getImgList(0)
        }
      })
    },
    selecCate (i) {
      this.getImgList(i)
    }
  }
}
</script>
<style lang="scss" scoped>
.wrapper {
  width: 100%;
  overflow: hidden;
  white-space: nowrap; /*当子元素超过父元素宽度的时候，不会折行*/
  .list {
      display: flex;
      padding:0 32px;
    a {
        width:60px;
        margin-right:60px;
        padding-bottom:24px;
        line-height: 40px;
        font-size: .021rem;
        height:40px;
    }
    .active{
      color:#007aff
    }
  }
}

  .imglist{
    ul{
      li{
        position: relative;
        margin: 4px;
        img{
          width:100%;
          height:100%;
          border-radius: 10px;
          margin:auto;
        }
        .info{
          position: absolute;
          bottom: 0;
          color:aliceblue;
          text-align: left;
          .titile{
            font-size: .012rem;
          }
          .text{
            text-indent: 2em;
            text-align: center;
            font-size: .011rem;
            line-height: 3em;
          }
        }
      }
    }
  }
</style>
